Product configurators in the web

The ingenious part lists / product configurators can be published in the web modules WEB (mobile access for employees), B2B (quote and ordering tool for dealers) and price info (calculation tool for end customers). This way each audience gets the possibility to calculate actual prices of the products on offer also without higher technical skills and also without difficulty searching in catalogues and price lists.

The integrated validation widely preempts that wrong or incomplete configurations are calculated and ordered or even produced.

By default the part lists will be displayed in the web in the same technical, contentual and designed way as in the ingenious client.

Representation of a product configurator in the ingenious.basic client

Which part lists are published in the web is defined by matchcode. The call for a price info could be for example: "URL:Port/INFO/Matchcode"

Representation of a product configurator in the Web

For dealers and especially for end customers the user guidance should be optimized to simplify the operating and to make the product configurators easier to understand.

For this various possibilities come into consideration.

1. Controls in the web

With various web controls the values of the part list variables can be represented in different ways and can be enriched with additional notes. The following web controls are predefined in the standard web templates. Additionals are possible on request. In principle all controls to be used need to be defined in the accordingly web template (_PartlistItemPartial.cshtml) and has to be defined there.

Type

Description

Text input field

Within such a text input field free text can be entered. It is standardly used for part list options without value assignment.

Numeric input field

As distinct from text input fields the numeric input field only allows numbers, but no letters. It is standardly used for part list options of type INTEGER or FLOAT.

Checkbox

Checkboxes are either activated or not. They are standardly used for part list options of type YES/NO or NO/YES.

Checkbox

Copy Code

@if (iControlType == 1) // 1 - Checkbox
                {
                    <span class="input-group-addon" style="border: none; border-left: 1px solid #ccc; height : 32px;">
                        <input id='checkbox@(Model.sBindingValue)' type="checkbox" @(Model.sValue == "1" || Model.sValue == "-1" ? "checked" : "") onclick="OnCheckboxChanged('checkbox@(Model.sBindingValue)', '@(Model.sBindingValue)')">
                    </span>
                    <span class="input-group-addon" style="border: none; width:100%;"></span>
                }

Dropdown / Combobox

Selection lists are standardly used for part list options of type LIST.

Dropdown

Copy Code

@if (iControlType == 10 || iControlType == 11)  // 10 - Dropdown, 11 - Combobox
                {
                    <select id='select@(Model.sBindingValue)' class="form-control" onchange="OnSelectChanged('select@(Model.sBindingValue)', '@(Model.sBindingValue)')">
                        @if (!Model.asValueList.Contains(Model.sValue))
                        {
                            <option value='@Model.sValue' selected>@Model.sValue</option>
                        }
                        @for (int i = 0; i < Model.asValueList.Count; i++)
                        {
                            <option value='@(Model.asValueList[i])' @(Model.asValueList[i] == Model.sValue ? "selected" : "")>@(Model.asTranslatedValueList[i])</option>
                        }
                    </select>
                }

Radio Buttons

Radio Buttons can alternatively be used for selection lists.

Radio Buttons

Copy Code

@if (iControlType == 20)  // 20 - Radiobuttons
                {
                    if (!Model.asValueList.Contains(Model.sValue))
                    {
                        Model.asValueList.Insert(0, Model.sValue);
                    }
                    for (int i = 0; i < Model.asValueList.Count; i++)
                    {
                        <div class="basicRadio-primary">
                            <div class="basicRadio">
                                <input id="radio@(Model.sBindingValue)_@(i.ToString())" type="radio" name="radio@(Model.sBindingValue)" class="form-control" value="@(Model.asValueList[i])" onclick="OnRadioChanged('radio@(Model.sBindingValue)_@(i.ToString())', '@(Model.sBindingValue)')" style="@(i == 0 ? "border-top: none;" : i == Model.asValueList.Count - 1 ? "border-bottom: none;" : "")" @(Model.asValueList[i] == Model.sValue ? "checked" : "")>
                                <label for="radio@(Model.sBindingValue)_@(i.ToString())" style="@(i == 0 ? "border-top: none;" : i == Model.asValueList.Count - 1 ? "border-bottom: none;" : "")">@(Model.asValueList[i])</label>
                            </div>
                        </div>
                    }
                }

Slider / Tracker for numeric values

Sliders can alternatively be used for numeric entry fields. Certainly they better suit for small ranges and integer values.

Slider

Copy Code

@if (iControlType == 23)  // 23 - Slider
                {
                    string[] asValues = Model.dictWebControl["control"].Substring(6).Replace("[", "").Replace("]", "").Split(';');
                    <div class="basicRange_1">
                        <div class="basicRange_2 col-lg-10 col-md-10 col-sm-11 col-xs-11 col-xxs-12">
                            <input id="range@(Model.sBindingValue)" name="range@(Model.sBindingValue)" type="range" class="form-control" min="@(asValues[0])" max="@(asValues[1])" step="@(asValues[2])" value="@(Model.sValue)" oninput="OnRangeChanged('range@(Model.sBindingValue)', '@(Model.sBindingValue)')" onload="OnRangeLoad('range@(Model.sBindingValue)', 'text@(Model.sBindingValue)', @(Model.sValue), @(asValues[0]), @(asValues[1]), @(asValues[2]))" />
                        </div>
                        <div class="basicRange_2 col-lg-2 col-md-2 col-sm-1 col-xs-1 hide-xxs">
                            <span>@(Model.sValue)</span>
                        </div>
                    </div>
                }

Colorpicker

Colorpicker are suited as an alternative to selection lists. they allow both the illustration of a color by RGB code and the inclusion of a picture or pictures script stored in the part list, e.g. for RAL colors or special patterned foils.

Slider

Copy Code

@if (iControlType == 21)  // 21 - Colorpicker
                {
                    if (!Model.asValueList.Contains(Model.sValue))
                    {
                        Model.asValueList.Insert(0, Model.sValue);
                    }
                    string[] asValues1 = Model.dictWebControl["control"].Substring(5).Replace("[", "").Replace("]", "").Split(':');
                    string[] asValues2 = asValues1[1].Split(';');
                    asValues1 = asValues1[0].Split(';');
                    string[] asValueStyles = new string[Model.asValueList.Count];
                    string[] asValuesWhite = new string[Model.asValueList.Count];
                    for (int i = 0; i < Model.asValueList.Count; i++)
                    {
                        int index = Array.IndexOf(asValues1, Model.asValueList[i]);
                        if (!asValues1.Contains(Model.asValueList[i])) { }
                        else if (asValues2[index] == "#ffffff") { }
                        else if (asValues2[index].StartsWith("#"))
                        {
                            asValueStyles[i] = "background-color: " + asValues2[index] + ";";
                        }
                        else if (!Model.dictWebControlImages.ContainsKey(asValues2[index])) { }
                        else
                        {
                            asValueStyles[i] = "background-image: url(" + Model.dictWebControlImages[asValues2[index]] + ")";
                        }
                        if (string.IsNullOrEmpty(asValueStyles[i]))
                        {
                            asValueStyles[i] = "background-color: #ffffff; border: 1px solid #ccc;";
                            asValuesWhite[i] = "white";
                        }
                    }
                    <ul id="color@(Model.sBindingValue)" class="nav navbar-nav" style="width:100%;" tabindex="0">
                        <li class="dropdown" style="width:100%;">
                            <div class="dropdown basicColor">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                    <div class="basicColor_pickedColor">
                                        <span style="@asValueStyles[Model.asValueList.IndexOf(Model.sValue)]"></span><label>@(Model.sValue)</label><b class="caret caret_right"></b>
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-caret">
                                    @for (int i = 0; i < Model.asValueList.Count; i++)
                                    {
                                        <li><a class="colorpicker @(Model.asValueList[i] == Model.sValue ? "selected" : "") @(asValuesWhite[i])" href="#" style="@(asValueStyles[i])" onclick="OnImgSelectionChanged('@(Model.sBindingValue)', '@(Model.asValueList[i])')"></a></li>
                                    }
                                </ul>
                            </div>
                        </li>
                    </ul>                }

Picture Slider

Picture Sliders can alternatively be used for selection lists. They illustrate the single possible variants in pictures or picture scripts that are stored in the part list.

Picture Slider

Copy Code

@if (iControlType == 22)  // 22 - Picture slider
                {
                    string[] asValues1 = Model.dictWebControl["control"].Substring(7).Replace("[", "").Replace("]", "").Split(':');
                    string[] asValues2 = asValues1[1].Split(';');
                    asValues1 = asValues1[0].Split(';');
                    string[] asValueStyles = new string[Model.asValueList.Count];
                    for (int i = 0; i < Model.asValueList.Count; i++)
                    {
                        int index = Array.IndexOf(asValues1, Model.asValueList[i]);
                        if (!asValues1.Contains(Model.asValueList[i])) { }
                        else if (Model.dictWebControlImages.ContainsKey(asValues2[index]))
                        {
                            asValueStyles[i] = "background-image: url(" + Model.dictWebControlImages[asValues2[index]] + ");";
                        }
                        else
                        {
                            asValueStyles[i] = "background-color: #ffffff;";
                        }
                    }
                    <div class="basicPicture-container">
                        <div class="basicPicture-wrapper">
                            <ul id="pict@(Model.sBindingValue)" class="nav nav-tabs basicPicture-list" tabindex="0">
                                @for (int i = 0; i < Model.asValueList.Count; i++)
                                {
                                    <li>
                                        <a class="basicPict @(Model.asValueList[i] == Model.sValue ? "selected" : "")" href="#" style="@(asValueStyles[i])" onclick="OnImgSelectionChanged('@(Model.sBindingValue)', '@(Model.asValueList[i])')"></a>
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                }

Button

Buttons can alternatively be used for selection lists. They illustrate the single possible variants in graphic interface control buttons.

Button

Copy Code

@if (iControlType == 24) // 24 - Button
                {
                    <div class="basicPicture-container">
                        <div class="basicPicture-wrapper">
                            <ul id="pict@(Model.sBindingValue)" class="nav nav-tabs basicPicture-list" tabindex="0" style="height:100%;">
                                @for (int i = 0; i < Model.asValueList.Count; i++)
                                {
                                    <li>
                                        <button name="submitform" value="@Model.asValueList[i]" class="btn basicButton @(Model.asValueList[i] == Model.sValue ? "basicButtonSelected" : "")" onclick="OnImgSelectionChanged('@(Model.sBindingValue)', '@(Model.asValueList[i])')">
                                            <span>@Model.asValueList[i]</span>
                                        </button>
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                }

Pictures, Sliders and Color-Picker in the product configurator

Radio-Buttons, Picture-Slider, Tooltips,... in the product configurator

2. Definition of the controls in the part lists

Tabular notation (compatibility mode previous version)

General	The web control of each individual option is determined by a separate line in the measurement definition of the part list with the name "=webcontrol variable" As value the respective syntax of the web control is entered together with the relevant values.
Text input field	A variable defined as text does not need an extra webcontrol. The text input field is displayed by default. However, with the definition as Webcontrol additional texts etc. can be displayed. With the value "description =" + any text, an explanatory text can be deposited, which is displayed as a placeholder until the user enters his own text in the configurator field.
Numeric input field	For a variable defined as INTEGER or FLOAT, a numeric entry field is displayed by default. It is not necessary to specify an extra webcontrol.
Checkbox	For the control checkbox, which is defined with Yes / No or No / Yes, no extra Webcontrol is required.
Drop down / Combobox	All list items (Fixed List, List) are displayed in a drop-down by default. The definition as extra Webcontrol is not required.
Radio Buttons	Radio Buttons are an alternative to the classic drop-down list. The values are displayed fluently with a prefixed clickable circular option field. The definition is made with the expression "control = radio".
Slider / Tracker for numeric values	A slider for numerical values, which is displayed instead of an input field, is defined by the expression "control = slider [0; 10; 1]". The values in square brackets stand for: [start value, end value, running steps].
Colorpicker	A color picker for the alternative representation of a selection list with colors is defined via "control = color [values; color codes]". Example: control = color [white; brown; gray; green; RAL: #ffffff; # b97a57; # a0a0a0; # 26392f; RAL] For colors that can not be displayed using hex code, images or image scripts can be loaded, but the name of the image must be entered instead of a color code. For example, RAL and foil coatings often use a multi-color image.
Picture Slider	In a picture slider, images are displayed instead of a classic selection list, which visually clarify the options. Notation: control = picture [Values: Image names] Example: control = picture [X PVC; XL PVC; XXL PVC: X_PVC; XL_PVC; XXL_PVC] The images must be inserted in the respective parts list in the saved images or as a saved image script. The name of the individual image must be specified within the square brackets of the webcontrol.
Button	Buttons are an alternative to the classic drop-down list. The values are displayed individually in clickable buttons. The definition is made with the expression "control = button".
Extras	Each webcontrol can contain, in addition to its actual content, namely the selection of options, additional information which is intended to make the selection easier for the user. For each extra content, create a separate line for the same variable. "= webcontrol variable name" The extras can each be displayed for the variable as a whole or for the individually selected (clicked) selection.
Title	Each option can be highlighted with a title / headline a) the option as a whole title = title or b) every single variant title = {tab (variable) ("value1", "value2"; ... "Heading 1", "Heading 2" ...)}
Description	For each option, an explanatory description text can be deposited, namely a) for the option as a whole description = Description Text or b) for each variant description = {tab (variable) ("Value1"; "Value2"; ...: "Description text 1"; "Description text 2"; ...)}
Picture	For each option, in addition to the possible images in a slider, a larger / different preview image can be displayed, namely a) for the option as a whole picture = Picture Name or b) for each variant picture = {tab (variable) ("Value1"; "Value2"; ...: "Picture Name 1"; "Picture Name 2"; ...)}
Tooltip	For each option, additional information from a picture or PDF can be loaded via a tooltip a) for the option as a whole tooltip = Information or b) for each variant tooltip = {tab (variable) ("value1", "value2"; ... "Info1"; "Info2" ...)} Info stands for a picture name as stored in the saved pictures or picture scripts or for the file name of a PDF saved in the web directory (\inetpub\WebsiteName\Content\Tooltips\).
HTML	The parameter "html =" is reserved for individual additions that are not covered with the already existing extras. So could e.g. Instead of a tooltip in total or per selected value, a tooltip for each individual value can be stored, which can be opened directly at the selectable value, even before this value has been clicked on.

Web controls in tabular notation

Fluent Code (ingenious notation)

In the source code notation of the parts lists, all components of a web control are summarized in an expression.

WebControl("Variable", sWebControl, sWebHeader, sWebDesc, sWebImage, sWebTooltip, sWebHTML);

The available strings are largely self-explanatory. If a component is not to be used for the individual variable, it is simply left empty ("").

The individual strings of the webcontrol can also be defined in advance for readability:

sWebControl = "";

sWebHeader = "";

sWebDesc = "";

sWebImage = "";

sWebTooltip1 = "";

sWebTooltip2 = "";

WebControl("Variable", sWebControl, sWebHeader, sWebDesc, sWebImage, sWebTooltip1, sWebTooltip2);

The same web controls are available as for the tabular notation.

Web controls in the sourcecode view

Segments

Even in the presentation in the client / server version, groups of variables can be sumarized into segments.

Notation in tabular form: "= section 1. Dimensions"

Notation in the source code view: "Conf_Section (" title1 "," 1. Dimensions ", true);" - Specify true or false whether the segment is open or closed when opening the configurator.

But while in the client the segment separates the individual groups only by means of headlines, they are visibly separated one from another on the Web. Depending on the definition on the Web templates (\Views\Partlist\Partlist.cshtml), the separated areas are displayed as tabs or segments.

At the beginning of the Partlist.cshtml either the template of the tabs is loaded or that of the segments.

@model ingenious.mvc.Models.PartlistModel
@Html.Partial("_PartlistReiterPartial", Model)

@model ingenious.mvc.Models.PartlistModel
@Html.Partial("_PartlistSegmentsPartial", Model)

Representation of the groups in tabs

Product configurator with segments